<template>
    <div class="all">
        <!-- 设备档案 -->
        <device-file
            class="mb10"
            :uuid="uuid"
            :friendsObj="friendsObj"
            :productId="productId"></device-file>
        <!-- 远程码 -->
        <remote-code
            :uuid="uuid"
            class="mb10"></remote-code>
        <!-- 数据监测 -->
        <data-monitoring
            class="mb10"
            :uuid="uuid"></data-monitoring>
        <!-- 设备报警 -->
        <device-alarm
            :uuid="uuid"></device-alarm>
    </div>
</template>

<script>
import DeviceFile from './../manage/deviceFile.vue';
import RemoteCode from './../manage/remoteCode.vue';
import DataMonitoring from './../manage/dataMonitoring.vue';
import DeviceAlarm from './../manage/deviceAlarm.vue';
import { reactive, toRefs, onActivated } from 'vue';
import useMaintenanceMembersSetup from '@/setup/maintenanceteam/MaintenanceTeamMembersSetup.js';
export default {
    components: {
        DeviceFile,
        RemoteCode,
        DataMonitoring,
        DeviceAlarm
    },
    props: {
        uuid: String,
        productId: String
    },
    setup (props, ctx) {
        const { getAllMaintenanceTeamMembers } = useMaintenanceMembersSetup();

        const state = reactive({
            friendsObj: {}
        });

        onActivated(async () => {
            // 获取客户名册用于匹配别名等
            if (!props.productId) return;
            const tmp = await getAllMaintenanceTeamMembers();
            tmp.value.forEach((item) => {
                state.friendsObj = reactive({ ...state.friendsObj, [item.account]: item.alias });
            });
        });

        return {
            ...toRefs(state)
        };
    }
};
</script>

<style scoped lang="scss">
.all {
    padding: 10px 15px 15px;
}
.mb10 {
    margin-bottom: 10px;
}
</style>
